"use strict";

import {
    //核心
    React, Enhance, Controller, $,
    tools,
    // 组件
    Table, TabPage, Lang, Dialog, Tree,
    Form, Page, Upload, Icon, Grid, Panel,
    Input, BoxWidget, Button, Lock, Directive
} from 'admin';


var {http} = tools;
import valid from '../../validate/admin.json';


class BannerController extends Controller {
    state = {
        tableProps: null,
        status: [
            {title: 'switch-on', value: 1},
            {title: 'switch-off', value: 0}
        ],
        edit: {}
    }

    constructor() {
        super();

        this.state.tableProps = {
            update: {},
            query: {},
            types: {
                sort: this._typesSort
            },
            buttons: {
                edit: {
                    onClick: this._handlerEditDialog
                },
                upload: this._handlerCreateUpload
            },
            pk: 'id',
            fields: [
                {
                    order: 0,
                    name: 'id',
                    width: 50,
                },
                {
                    order: 0,
                    name: 'img',
                    width: 50,
                    type: {
                        name: 'image',
                        options: {
                            baseUrl: window.RESOURCE_URL + 'banner/'
                        }
                    },
                    className: 'text-center',
                },
                {
                    order: 0,
                    name: 'title',
                },
                {
                    order: 0,
                    name: 'time',
                    width: 200,
                    type: {
                        name: 'datetime'
                    }
                },
                {
                    order: 0,
                    width: 50,
                    name: 'status',
                    type: {
                        name: 'status'
                    },
                    className: 'text-center'
                },
                {
                    order: 0,
                    name: 'sort',
                    type: {
                        name: 'sort',
                    },
                },
            ]
        };
    }


    render() {
        return (
            <Grid>
                <Grid col="12 12 12 12">
                    <Form {...this.props} onSubmit={this._handlerSearch}>
                        <BoxWidget color="4" buttons={[{title:'search',icon:'search',type:'submit'}]}>
                            <Grid col="2 2 2 2">
                                <Input type="text" name="title" value={""} message={this._lang("title")}/>
                            </Grid>
                            <Grid col="2 2 2 2">
                                <Input type="select" name="status" isLang={true} placeholder="all"
                                       option={this.state.status} message="status"/>
                            </Grid>
                        </BoxWidget>
                    </Form>
                </Grid>
                <Grid col="12 12 12 12">
                    <BoxWidget color="3" buttons={[{icon:'add',title:'add',onClick:this._handlerAddDialog}]}>
                        <Lock>
                            <Table ref="table" {...this.props} {...this.state.tableProps} />
                        </Lock>
                    </BoxWidget>
                </Grid>
                {/*添加*/}
                <Directive name="Modal">

                    <Dialog
                        ref="addDialog"
                        elem={Form}
                        {...this.props}
                        action="do_add"
                        title={this._lang("add")}
                        onSuccess={this._handlerAddSuccess}
                        rules={valid.banner.do_add}
                        buttons={[{title:'submit',type:'submit'}]}
                    >

                        <Input type="text" name="title" message={this._lang("title")}/>
                    </Dialog>
                </Directive>
                {/*编辑*/}
                <Directive name="Modal">
                    <Dialog
                        ref="editDialog"
                        elem={Form}
                        {...this.props}
                        action="do_edit"
                        title={this._lang("edit")}
                        onSuccess={this._handlerEditSuccess}
                        rules={valid.banner.do_edit}
                        buttons={[{title:'submit',type:'submit'}]}
                    >
                        <Input type="hidden" name="id" value={this.state.edit.id}></Input>
                        <Input type="text" name="title" value={this.state.edit.title} message={this._lang("title")}></Input>
                    </Dialog>
                </Directive>
            </Grid>
        );
    }

    /**
     *
     * @private
     */
    _handlerAddDialog() {
        this.refs.addDialog.show();
    }

    /**
     *
     * @param edit
     * @private
     */
    _handlerEditDialog(edit) {
        this.setState({edit}, (function () {
            this.refs.editDialog.show();
        }).bind(this));
    }

    _typesSort(data, options) {
        return (
            <Input
                key={data.data.id}
                type="number"
                value={data.val}
                className=""
                onBlur={(function(e){
                        if(e.target.value!=data.val){
                            http(`${window.SERVER_URL}/${this.props.module}/${this.props.controller}/do_change_sort`,{id:data.data.id,sort:e.target.value})
                            .success((function(update){
                                this.update(update);
                            }).bind(this))
                            .loading(this._emit.bind(this,'Loading'))
                        }
                    }).bind(this)}/>
        );
    }


    _handlerEditSuccess(data) {
        if (data) {
            this.refs.table.update(data);
            this.refs.editDialog.hide();
        }
    }

    /**
     *
     * @private
     */
    _handlerAddSuccess(data) {
        if (data) {
            this.refs.table.refresh();
            this.refs.addDialog.hide();
        }
    }

    /**
     *
     * @param key
     * @param data
     * @param index
     * @returns {XML}
     * @private
     */
    _handlerCreateUpload(key, data, index) {
        return (
            <Upload
                url={window.SERVER_URL+"/scdc/upload/get_banner"}
                onSuccess={this._handlerUploadSuccess}
                post={{id:data.id}}
            ><Icon icon="upload" type="admin"></Icon>
            </Upload>
        );
    }

    /**
     *
     * @param data
     * @private
     */
    _handlerUploadSuccess(data) {
        this.refs.table.update(data);
    }


    /**
     *
     * @param data
     * @returns {boolean}
     * @private
     */
    _handlerSearch(data) {
        this.refs.table.query(data);
        return false;
    }
}

export default Enhance(BannerController);